
<template>
  <div class="homerelease">
    <div class="wrapper">
      <ul class="content">
        <li v-for="(item,index) in mov" :key="item.id" 
         @click="selectHomeReleaseData(index)"> 
         <div class="img">
           <img :src="item.img" alt="">
         </div>

         <div class="text">
           <span>{{item.nm}}</span>
           <p class="sc">评分：{{item.sc}}</p>
           <p class="star">
             主演：{{item.star}}
           </p>

           <p class="rt">
             上映日期：{{item.rt}}
           </p>

         </div>
         <button>购票</button>
         </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data(){
    return{
      mov:[],
    };},
  created(){
    this.getData();
  },
  methods:{
        getData() {
      axios
        .get("/api/homelist.json")
        .then((res) => {
          console.log(res.data);
          this.mov = res.data.mov;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectHomeReleaseData(index){
      // const id=item.id;
      this.$router.push({
        path:`/homedetail/${index}`,
      });
    }
  }
  
}
</script>

<style scoped>
.homerelease{
  margin: 0 auto;
  width: 90%;
}
ul.content{
padding-left: 0px;
}
ul.content>li{
  list-style: none;
}
.img{
  text-align: left;
  float: left;
}
.img>img{
  width: 80px;
  height: 100px;
  padding-right: 15px;
}

li {
  width: 100%;
  float: left;
  padding-bottom: 10px;
}
.text {
  float: left;
  text-align: left;
  width: 57%;
}
.text > span {
  font-weight: bold;
     display: block;
   width: 100%;
   /* margin: 0 auto; */
   font-size: 19px;
     overflow: hidden; /*溢出的部分隐藏*/
  white-space: nowrap; /*文本不换行*/
  text-overflow: ellipsis;

}
.sc{
  color: orange;
  float: left;
  font-size: 14px;
  font-weight: bold;
}
p {
  margin: 0px 5px 7px 0px;
}
.star{
  width: 100%; /*一定要设置宽度，或者元素内含的百分比*/
  overflow: hidden; /*溢出的部分隐藏*/
  white-space: nowrap; /*文本不换行*/
  text-overflow: ellipsis;
    color: rgb(114, 113, 113);
  font-size: 14px;
}
.rt{
  width: 100%; /*一定要设置宽度，或者元素内含的百分比*/
  overflow: hidden; /*溢出的部分隐藏*/
  white-space: nowrap; /*文本不换行*/
  text-overflow: ellipsis;
    color: rgb(114, 113, 113);
  font-size: 14px;
}
hr {
  background: rgb(230, 230, 230);
}
button {
  float: right;
  background: orange;
  color: white;
  border-radius: 4px;
  border: 0;
  width: 50px;
  height: 30px;
  margin-top: 40px;
}
</style>